<template>
  <el-footer class="app-footer">
    <div class="footer-main">
      <el-row :gutter="20">
        <!-- 关于我们 -->
        <el-col :span="6">
          <div class="footer-section">
            <h3>关于我们</h3>
            <p>AI智能助手是一个基于人工智能的对话平台，致力于为用户提供智能、高效的对话服务。</p>
            <div class="company-info">
              <img src="https://element-plus.org/images/element-plus-logo.svg" alt="Logo" class="footer-logo">
              <span class="company-name">AI智能科技有限公司</span>
            </div>
          </div>
        </el-col>

        <!-- 产品服务 -->
        <el-col :span="6">
          <div class="footer-section">
            <h3>产品服务</h3>
            <ul class="footer-links">
              <li><router-link to="/products/ai-chat">AI对话</router-link></li>
              <li><router-link to="/products/code-assistant">代码助手</router-link></li>
              <li><router-link to="/products/text-analysis">文本分析</router-link></li>
              <li><router-link to="/products/data-mining">数据挖掘</router-link></li>
            </ul>
          </div>
        </el-col>

        <!-- 联系方式 -->
        <el-col :span="6">
          <div class="footer-section">
            <h3>联系我们</h3>
            <ul class="contact-info">
              <li>
                <el-icon><Location /></el-icon>
                <span>北京市海淀区科技园区</span>
              </li>
              <li>
                <el-icon><Phone /></el-icon>
                <span>400-888-8888</span>
              </li>
              <li>
                <el-icon><Message /></el-icon>
                <span>contact@aichat.com</span>
              </li>
            </ul>
          </div>
        </el-col>

        <!-- 关注我们 -->
        <el-col :span="6">
          <div class="footer-section">
            <h3>关注我们</h3>
            <div class="qrcode-container">
              <div class="qrcode-item">
                <el-image 
                  src="https://example.com/wechat-qr.png" 
                  alt="微信公众号"
                  :preview-src-list="[]"
                  fit="cover"
                  class="qrcode-image">
                  <template #error>
                    <div class="qrcode-placeholder">
                      <el-icon><Promotion /></el-icon>
                      <span>微信公众号</span>
                    </div>
                  </template>
                </el-image>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 合作伙伴 -->
    <!-- <div class="partners-section">
      <h3>合作伙伴</h3>
      <div class="partners-list">
        <el-row :gutter="20">
          <el-col :span="4" v-for="partner in partners" :key="partner.name">
            <div class="partner-item">
              <el-image 
                :src="partner.logo" 
                :alt="partner.name"
                fit="contain"
                class="partner-logo">
                <template #error>
                  <div class="image-placeholder">{{ partner.name }}</div>
                </template>
              </el-image>
            </div>
          </el-col>
        </el-row>
      </div>
    </div> -->

    <!-- 底部信息 -->
    <div class="footer-bottom">
      <div class="footer-links">
        <router-link to="/terms">服务条款</router-link>
        <router-link to="/privacy">隐私政策</router-link>
        <router-link to="/security">安全说明</router-link>
        <a href="https://beian.miit.gov.cn" target="_blank">京ICP备xxxxxxxx号-1</a>
      </div>
      <div class="copyright">
        © {{ currentYear }} AI智能助手 版权所有
      </div>
    </div>
  </el-footer>
</template>

<script>
import { ref } from 'vue'
import { Location, Phone, Message, Promotion } from '@element-plus/icons-vue'

export default {
  name: 'AppFooter',
  components: {
    Location,
    Phone,
    Message,
    Promotion
  },
  setup() {
    const currentYear = new Date().getFullYear()
    const partners = ref([
      { name: '腾讯云', logo: 'https://example.com/tencent.png' },
      { name: '阿里云', logo: 'https://example.com/aliyun.png' },
      { name: '华为云', logo: 'https://example.com/huawei.png' },
      { name: '百度智能云', logo: 'https://example.com/baidu.png' },
      { name: '微软Azure', logo: 'https://example.com/azure.png' },
      { name: 'AWS', logo: 'https://example.com/aws.png' },
    ])

    return {
      currentYear,
      partners
    }
  }
}
</script>

<style scoped>
.app-footer {
  background-color: #001529;
  color: #fff;
  padding: 60px 20px 20px;
  height: auto !important;
}

.footer-main {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.footer-section {
  margin-bottom: 30px;
}

.footer-section h3 {
  color: #409EFF;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-section p {
  color: #8c8c8c;
  line-height: 1.6;
}

.company-info {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.footer-logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.company-name {
  font-size: 16px;
  font-weight: 500;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #8c8c8c;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #409EFF;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #8c8c8c;
}

.contact-info .el-icon {
  margin-right: 10px;
  color: #409EFF;
}

.qrcode-container {
  display: flex;
  gap: 20px;
}

.qrcode-item {
  text-align: center;
}

.qrcode-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.qrcode-placeholder {
  width: 120px;
  height: 120px;
  background: #1a1a1a;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c8c8c;
}

.qrcode-placeholder .el-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.qrcode-text {
  color: #8c8c8c;
  font-size: 14px;
}

.partners-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
  border-top: 1px solid #333;
}

.partners-section h3 {
  color: #409EFF;
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}

.partners-list {
  margin-bottom: 40px;
}

.partner-item {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 20px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo {
  max-width: 100%;
  max-height: 100%;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c8c8c;
  font-size: 14px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid #333;
  text-align: center;
}

.footer-bottom .footer-links {
  margin-bottom: 15px;
}

.footer-bottom .footer-links a {
  color: #8c8c8c;
  text-decoration: none;
  margin: 0 15px;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-bottom .footer-links a:hover {
  color: #409EFF;
}

.copyright {
  color: #8c8c8c;
  font-size: 14px;
}
</style> 